---
title: Upgrade to v2 with codemod | gluestack-ui
description: In this document, we will guide you through the steps for upgrading from gluestack-ui v1 to gluestack-ui v2.
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Home/Overview/Upgrade to v2" />

import {
  Tabs,
  CollapsibleCode,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';

# Upgrade to gluestack-ui v2 with Codemod

This guide provides detailed steps to upgrade from gluestack-ui v1 to gluestack-ui v2. With codemod you can automate the process of code transformations, making it easier and faster to migrate your project to gluestack-ui v2. By following this guide, you'll ensure a smooth transition with minimal manual adjustments.

## gluestack-ui v1 Usage Scenarios:

gluestack-ui v1 users can be divided into three scenarios:

- **Scenario 1** : Users who imported the gluestack-ui configuration from `@gluestack-ui/config`.
- **Scenario 2** : Users who exported the gluestack-ui configuration and made modifications to it (`gluestack-ui.config.ts`).
- **Scenario 3** : Users who exported components as well.

<br />

At this time, we fully support migration for users in **Scenario 1 and Scenario 2** using codemod.

### Overview of Steps to Follow (for  Scenario 1 and Scenario 2  Users)

<br/>
1. **Initialize gluestack-ui v2**: `npx gluestack-ui@latest init`
2. **Setup Tailwind CSS**: `import "@/global.css"`
3. **Add All Components**: `npx gluestack-ui@latest add --all`
4. **Code Migration**: `npx @gluestack-ui/v2-codemod@latest <project_dir>`
<br/>

## Step 1 : Initialize gluestack-ui v2

**Run the below command to setup the project**:

```
npx gluestack-ui@latest init
```

To refer more about the gluestack-ui v2 installation, check [this](https://gluestack.io/ui/docs/home/getting-started/installation).


> Installation using gluestack-ui CLI in Expo projects supports for Expo SDK 50 and above only. For Expo SDK < 49, please refer to the manual installation guide [here](https://gluestack.io/ui/docs/home/getting-started/installation).

## Step 2 : Setup Tailwind CSS

Import `global.css` / `globals.css` where Tailwind directives are defined.

```jsx
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import '@/global.css';

export default function App() {
  return <GluestackUIProvider>{/* Your code */}</GluestackUIProvider>;
}
```
## Step 3 : Add All Components

To add all the components run the following command:

```jsx
npx gluestack-ui@latest add --all
```

You can add only the necessary components instead of including all. Check [here](https://gluestack.io/ui/docs/components/heading).

<CollapsibleCode>
  
```jsx 
npx gluestack-ui@latest add heading 
```
</CollapsibleCode>

## Step 4 : Code Migration

### Codemod
The gluestack-ui v2 migration process has been streamlined with the creation of a codemod. This codemod automates the conversion of your existing v1 code to v2, ensuring a smooth transition. Here’s what the codemod does:

##### Style Migration:
  - It migrates all your existing stylings in v1 code to the appropriate v2 code.
  - The migrated styles will match the styling conventions used in NativeWind.
##### Config Migration:
  - If you have a custom v1 configuration, the codemod will also migrate this configuration to be compatible with v2.
##### Limitations:
  - Descendant Styling ( As it’s not supported in NativeWind at the moment)
  - Value of `sx` prop is variable
#### Please proceed with the following steps to continue the migration:
<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>With Codemod</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>
### Run the following command :

```bash
npx @gluestack-ui/v2-codemod@latest <project_dir>
```

</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

To manually change the styling of any respective v1 specific style to v2 style we can follow this property mapper to ideally convert the styles to `NativeWind` stylings.

### Property Mapper :

In this property mapper table you can find all the properties of v1 and how they can be written in v2

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText> gluestack-ui v1</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText> gluestack-ui v2</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`underline={true}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className=”underline”`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`bold={true}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className=”font-<value>”`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`size="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className=”text-value”`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`bg="value" / bgColor="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="bg-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`p="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="p-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`color="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="color-value" / className="text-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`h="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="h-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`w="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="w-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`fontWeight="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="font-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`my="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="my-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`justifyContent="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="justify-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`alignItems="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="items-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`mx="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="mx-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$dark={{ "prop" :"value"}}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="dark:prop-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`px="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="px-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderColor="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderRightWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-r-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderLeftWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-l-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderTopWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-t-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderBottomWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="border-b-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`borderRadius="value" / rounded="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="rounded-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`mt="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="mt-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`mb="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="mb-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`m="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="m-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`py="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="py-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`pt="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="pt-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`pb="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="pb-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`pl="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="pl-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`pr="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="pr-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`ml="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="ml-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`mr="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="mr-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`flex={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="flex-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`flexDirection="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="flex-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`lineHeight="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="leading-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`h="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="h-[value]"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`alignSelf="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="self-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`position="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="position-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`maxWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="max-w-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`maxHeight="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="max-h-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`minWidth="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="min-w-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`minHeight="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="min-h-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`fontFamily="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="font-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`fontStyle="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`fontSize="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="text-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`top={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="top-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`bottom={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="bottom-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`left={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="left-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`right={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="right-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`zIndex={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="z-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`shadowColor="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="shadow-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`overflow="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="overflow-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`textAlign="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="text-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`display="value"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="hidden / flex / block / inline"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$sm={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="sm:value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$md={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="md:value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$lg={value}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="lg:value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

### Property Combinations :

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText> gluestack-ui v1</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText> gluestack-ui v2</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$sm-<property>=<token> / $sm-bg=red500`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="sm:*"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$sm-dark-<property>=<token> / $sm-dark-bg=*`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="sm:dark:<property>-<token>"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`sx={{<property>: <value>}}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="<property>-<value>"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$dark-bg="_" / $dark-color="_" / $dark-%="*"`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="dark:bg-*" / className="dark:color-*" / className="dark:%-*"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`$<mode>-property=value`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="mode:<property>:value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`sx={{ _dark: { <property>:<value>} }}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="dark:<property>:<value>"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`sx={{
    _ios: {
      property: <value>
    },
    _android: {
      property: <value>
    }
  }}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="ios:property-<value> android:property-<value>"`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>{`sx={{
    "@base": {
      _light: {
        property: <value>
      },
      _dark: { 
        property: <value>
      }
    },
    "@md": {
      _light: { 
        property: <value> 
      },
      _dark: { 
        property: <value> 
      }
    }
  }}`}</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`className="property-value dark:property-value md:property-value md:dark:property-value"`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

## Update config :

For config conversion,we need to make changes in two files gluestack-ui config file & Tailwind CSS config file.

### Config conversion :

```jsx
// gluestack-ui v1

// Without CSS Variables
{
  tokens: {
    ...defaultConfig.tokens,
    colors: {
      ...defaultConfig.tokens.colors,
      primary0: "#F5F3FF",
      primary50: "#999999",
    },
  },
};

// gluestack-ui v2

// With CSS variables
{
  light: vars({
    "--color-primary-0": "#F5F3FF",
    "--color-primary-50": "#999999",
  }),
};

// Updating the config(nativewind) file
{
  extends: {
    colors: {
      primary: var(--colors-primary),
    },
  },
};

// Different color modes
{
  light: vars({
    "--color-background-0": "#B3B3B3",
    "--color-background-50": "#999999",
  }),
  dark: vars({
    "--color-background-0": "#111827",
    "--color-background-50": "#171717",
  }),
};

```

### Tailwind Config conversion :

```jsx
/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/**/*.{html,js,jsx,ts,tsx}',
    './app/**/**/*.{html,js,jsx,ts,tsx}',
    './layouts/*.{html,js,jsx,ts,tsx}',
    './screens/**/**/*.{html,js,jsx,ts,tsx}',
    './components/**/**/*.{html,js,jsx,ts,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      //adding new fontSize tokens
      fontSize: {
        '2xs': '10px',
        '3xs': '8px',
      },
      //adding new media query breakpoints
      screens: {
        'base': '0px',
      },

      colors: {
        //adding new color tokens
        rose: {
          0: 'var(--color-rose-0)',
          50: 'var(--color-rose-50)',
          100: 'var(--color-rose-100)',
          200: 'var(--color-rose-200)',
          300: 'var(--color-rose-300)',
          400: 'var(--color-rose-400)',
          500: 'var(--color-rose-500)',
          600: 'var(--color-rose-600)',
          700: 'var(--color-rose-700)',
          800: 'var(--color-rose-800)',
          900: 'var(--color-rose-900)',
          950: 'var(--color-rose-950)',
          error: 'var(--color-rose-error)',
          warning: 'var(--color-rose-warning)',
          muted: 'var(--color-rose-muted)',
          success: 'var(--color-rose-success)',
        },
        primary: {
          0: 'var(--color-primary-0)',
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
          950: 'var(--color-primary-950)',
        },
        secondary: {
          0: 'var(--color-secondary-0)',
          50: 'var(--color-secondary-50)',
          100: 'var(--color-secondary-100)',
          200: 'var(--color-secondary-200)',
          300: 'var(--color-secondary-300)',
          400: 'var(--color-secondary-400)',
          500: 'var(--color-secondary-500)',
          600: 'var(--color-secondary-600)',
          700: 'var(--color-secondary-700)',
          800: 'var(--color-secondary-800)',
          900: 'var(--color-secondary-900)',
          950: 'var(--color-secondary-950)',
        },
        tertiary: {
          50: 'var(--color-tertiary-50)',
          100: 'var(--color-tertiary-100)',
          200: 'var(--color-tertiary-200)',
          300: 'var(--color-tertiary-300)',
          400: 'var(--color-tertiary-400)',
          500: 'var(--color-tertiary-500)',
          600: 'var(--color-tertiary-600)',
          700: 'var(--color-tertiary-700)',
          800: 'var(--color-tertiary-800)',
          900: 'var(--color-tertiary-900)',
          950: 'var(--color-tertiary-950)',
        },
        error: {
          0: 'var(--color-error-0)',
          50: 'var(--color-error-50)',
          100: 'var(--color-error-100)',
          200: 'var(--color-error-200)',
          300: 'var(--color-error-300)',
          400: 'var(--color-error-400)',
          500: 'var(--color-error-500)',
          600: 'var(--color-error-600)',
          700: 'var(--color-error-700)',
          800: 'var(--color-error-800)',
          900: 'var(--color-error-900)',
          950: 'var(--color-error-950)',
        },
        success: {
          0: 'var(--color-success-0)',
          50: 'var(--color-success-50)',
          100: 'var(--color-success-100)',
          200: 'var(--color-success-200)',
          300: 'var(--color-success-300)',
          400: 'var(--color-success-400)',
          500: 'var(--color-success-500)',
          600: 'var(--color-success-600)',
          700: 'var(--color-success-700)',
          800: 'var(--color-success-800)',
          900: 'var(--color-success-900)',
          950: 'var(--color-success-950)',
        },
        warning: {
          0: 'var(--color-warning-0)',
          50: 'var(--color-warning-50)',
          100: 'var(--color-warning-100)',
          200: 'var(--color-warning-200)',
          300: 'var(--color-warning-300)',
          400: 'var(--color-warning-400)',
          500: 'var(--color-warning-500)',
          600: 'var(--color-warning-600)',
          700: 'var(--color-warning-700)',
          800: 'var(--color-warning-800)',
          900: 'var(--color-warning-900)',
          950: 'var(--color-warning-950)',
        },
        info: {
          0: 'var(--color-info-0)',
          50: 'var(--color-info-50)',
          100: 'var(--color-info-100)',
          200: 'var(--color-info-200)',
          300: 'var(--color-info-300)',
          400: 'var(--color-info-400)',
          500: 'var(--color-info-500)',
          600: 'var(--color-info-600)',
          700: 'var(--color-info-700)',
          800: 'var(--color-info-800)',
          900: 'var(--color-info-900)',
          950: 'var(--color-info-950)',
        },
        typography: {
          0: 'var(--color-typography-0)',
          50: 'var(--color-typography-50)',
          100: 'var(--color-typography-100)',
          200: 'var(--color-typography-200)',
          300: 'var(--color-typography-300)',
          400: 'var(--color-typography-400)',
          500: 'var(--color-typography-500)',
          600: 'var(--color-typography-600)',
          700: 'var(--color-typography-700)',
          800: 'var(--color-typography-800)',
          900: 'var(--color-typography-900)',
          950: 'var(--color-typography-950)',
        },
        outline: {
          0: 'var(--color-outline-0)',
          50: 'var(--color-outline-50)',
          100: 'var(--color-outline-100)',
          200: 'var(--color-outline-200)',
          300: 'var(--color-outline-300)',
          400: 'var(--color-outline-400)',
          500: 'var(--color-outline-500)',
          600: 'var(--color-outline-600)',
          700: 'var(--color-outline-700)',
          800: 'var(--color-outline-800)',
          900: 'var(--color-outline-900)',
          950: 'var(--color-outline-950)',
        },
        background: {
          0: 'var(--color-background-0)',
          50: 'var(--color-background-50)',
          100: 'var(--color-background-100)',
          200: 'var(--color-background-200)',
          300: 'var(--color-background-300)',
          400: 'var(--color-background-400)',
          500: 'var(--color-background-500)',
          600: 'var(--color-background-600)',
          700: 'var(--color-background-700)',
          800: 'var(--color-background-800)',
          900: 'var(--color-background-900)',
          950: 'var(--color-background-950)',
          error: 'var(--color-background-error)',
          warning: 'var(--color-background-warning)',
          muted: 'var(--color-background-muted)',
          success: 'var(--color-background-success)',
        },
      },
      fontFamily: {
        heading: undefined,
        body: undefined,
        mono: undefined,
      },
      fontWeight: {
        hairline: '100',
        extraBlack: '950',
      },
      fontSize: {
        '2xs': '10px',
      },
    },
    plugins: [],
  },
};
```

For Tailwind config configuration please refer to [this](https://tailwindcss.com/docs/configuration) .

</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

### Limitations (Descendant Styling) :

- Descendant styling will not be resolved and we’ll keep it as it is.
- You can update it manually by moving it to the respective element where the style is required

```jsx
//Before:

import { Box, Text } from '@gluestack-ui/themed';
export default function App() {
  return (
    <Box bg="$red500" sx={{ _text: { color: 'white' } }}>
      <Text>Simple Text</Text>
    </Box>
  );
}

//After:

import { Box } from '@/components/ui/box';
import { Text } from '@/components/ui/text';

//descendant style will remain as it is.
export default function App() {
  return (
    <Box className="bg-red-500"
    //Todo: Change this manually
    sx={{ _text: { color: 'white' } }}
    >
      <Text>Simple Text</Text>
    </Box>
  )
}
//Manual Changes:
//Update the descendant styling:
import { Box } from '@/components/ui/box';
import { Text } from '@/components/ui/text';

//descendant style will remain as it is.
//color:'white' --> text-white
export default function App() {
  return (
    <Box className="bg-red-500">
      <Text className="text-white">Simple Text</Text>
    </Box>
  )
}
```

## Examples of some property combinations :

<br />
**Applying styles in different color modes (light/dark)** :

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box sx={{ _dark: { bg: '$primary100' } }} bg="$primary300">
      Simple Text
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

export default function App() {
  return <Box className="dark:bg-primary-100 bg-primary-300">Simple Text</Box>;
}
```

**Applying styles for different media queries (sm/md/lg) using `@`**:

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box sx={{ '@sm': { bg: '$background100' } }} bg="$background500">
      Simple Box
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

export default function App() {
  return (
    <Box className="sm:bg-background-100 bg-background-500">Simple Box</Box>
  );
}
```

**Applying styles for different media queries (sm/md/lg) using `$`** :

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $sm={{ bg: '$background100' }} bg="$background500">
      Simple Box
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

export default function App() {
  return (
    <Box className="sm:bg-background-100 bg-background-500">Simple Box</Box>
  );
}
```

**Applying basic layout stylings** :

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box mt="$4" pb="$2">
      Simple Box
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

export default function App() {
  return <Box className="mt-4 pb-2">Simple Box</Box>;
}
```

**Applying basic layout stylings in different color modes** :

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $md-dark={{ mt: '$4' }} $md-light={{ mt: '$2' }} pb="$2">
      Simple Box
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

//By default if you don't mention any mode it's take light mode.
export default function App() {
  return <Box className="md:dark:mt-4 md:mt-2 pb-2">Simple Box</Box>;
}
```

**Applying styles for different action states (hover/active etc..,)** :

**Before**:

```jsx
import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $md-hover={{ bg: '$background500' }} $md={{ bg: '$background700' }}>
      Simple
    </Box>
  );
}
```

**After**:

```jsx
import { Box } from '@/components/ui/box';

//If not mentioned any mode explicitly then it's gonna take light mode only.
export default function App() {
  return (
    <Box className="md:hover:bg-background-500 md:bg-background-700">
      Simple
    </Box>
  );
}
```

**Applying styles for different platforms (mobile/web/android/ios)** :

**Before**:

```jsx
import { Text } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Text
      sx={{
        _ios: {
          marginTop: '$1',
        },
        _android: {
          marginTop: '$2',
        },
      }}
    >
      gluestack-ui
    </Text>
  );
}
```

**After**:

```jsx
import { Text } from '@/components/text';

export default function App() {
  return <Text className="ios:mt-1 android:mt-2">gluestack-ui</Text>;
}
```

**Applying styles for different color modes at different media queries** :

**Before**:

```jsx
import { Center } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Center
      px="$4"
      mb={-0.5}
      sx={{
        '@base': {
          _light: { bg: '$backgroundLight0' },
          _dark: { bg: '$backgroundDark800' },
        },
        '@md': {
          py: '$48',
          px: '$12',
          _light: { bg: '$primary500' },
          _dark: { bg: '$primary700' },
        },
      }}
    ></Center>
  );
}
```

**After**:

```jsx
import { Center } from '@/components/center';

export default function App() {
  return (
    <Center className="px-4 mb-0.5 bg-background-0 dark:bg-background800 md:py-48 md:px-12 md:bg-primary-500 md:dark:bg-primary-700"></Center>
  );
}
```

**Descendant Styling (this type of styling is not supported by NativeWind)** :

**Before**:

```jsx
import { CheckboxLabel, Text } from '@gluestack-ui/themed';

export default function App() {
  return (
    <CheckboxLabel
      sx={{
        bg: '$blue500',
        _text: {
          fontSize: '$sm',
          color: '$primary500',
        },
      }}
    >
      <Text>gluestack-ui</Text>
    </CheckboxLabel>
  );
}
```

**After**:

```jsx
import { CheckboxLabel } from '@/components/checkbox';
import { Text } from '@/components/text';

// we need to remove the descendant styling from parent element and add that
// styling to all the child elements
export default function App() {
  return (
    <CheckboxLabel className="bg-blue-500">
      <Text className="text-sm text-primary-500">gluestack-ui</Text>
    </CheckboxLabel>
  );
}
```
